<style scoped lang="scss">
	.item-box {
		display: flex;
		align-items: center;
		width: 750rpx;
		// justify-content: space-between;
	}

	.img {
		width: 150rpx;
		height: 150rpx;
	}

	.box-body {
		width: 400rpx;
		font-size: 14px;
	}

	.bottom {
		width: 150rpx;

	}
</style>

<template>
	<view class="warp">
		<unicloud-db v-slot:default="{data, loading, error, options}" :collection="collection" :where="where"
			@load="loadData" manual="true" ref="udbRef">
			<uni-list>
				<uni-list-item v-for="(item ,index) in data" :key="item._id">
					<template v-slot:body>
						<view class="item-box">
							<image :src="item.type[0]?.icon" class="img" mode="aspectFill"></image>
							<view class="box-body">
								<view class="title">{{item.type[0]?.title}}</view>
								<view class="section">
									<view class="s-box">
										<text>有效{{item.num}}次 ; </text>
										<text>核销{{item.cancel_num}}次</text>
									</view>
									<uni-dateformat :date="item.create_time"
										:threshold="[60000, 3600000]"></uni-dateformat>
								</view>
							</view>
							<view class="bottom">
								<uni-tag v-if="item.status == 0" text="未支付" type="warning"></uni-tag>
								<uni-tag v-if="item.status == 1" text="已支付" type="success"></uni-tag>
								<uni-tag v-if="item.status == 2" text="已退单" type="default"></uni-tag>
							</view>
						</view>
					</template>
				</uni-list-item>
				<uni-load-state @networkResume="refresh" :state="{data,pagination,hasMore, loading, error}"
					@loadMore="loadMore">
				</uni-load-state>
			</uni-list>
		</unicloud-db>
	</view>
</template>

<script>
	import {
		mapState
	} from "pinia";
	import {
		useUserStore
	} from "@/pinia/user.js";
	const db = uniCloud.database();
	let cdbRef;
	export default {
		data() {
			return {
				field: "",
			}
		},
		computed: {
			...mapState(useUserStore, ['userInfo']),
			where() {
				return `uid == '${this.userInfo._id}'`
			},
			collection() {
				return [
					db.collection("wolf-pay-order").where(this.where).field(
						"num,cancel_num,price,status,create_time,type,uid").orderBy("create_time desc").getTemp(),
					db.collection("wolf-activity").field('_id,title,icon').getTemp()
				]
			}
		},
		onReady() {
			this.$refs.udbRef.loadData()
			cdbRef = this.$refs.udbRef
		},
		methods: {
			loadData(data) {
				console.log("data", data)
			},
			refresh() {
				cdbRef.loadData({
					clear: true
				}, () => {
					uni.stopPullDownRefresh()
					console.log('end');
				})
				console.log('refresh');
			},
			loadMore() {
				cdbRef.loadMore()
			},
		},
		onPullDownRefresh() {
			this.refresh()
		},
		onReachBottom() {
			this.loadMore()
		}
	}
</script>